<template>
  <PageHeader />
  <div id="content" :class="{ reset_pc: !isMobile }" class="content" safe-area-inset-bottom>
    <ElConfigProvider :locale="locale">
      <router-view></router-view>
    </ElConfigProvider>
  </div>
</template>
<script setup>
import { ElConfigProvider } from "element-plus";
import en from "element-plus/dist/locale/en.mjs";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { storeToRefs } from "pinia";
import { computed, provide, ref } from "vue";
import PageHeader from "./components/PageHeader/index.vue";
import { commonStore } from "./stores/common";

const store = commonStore();
const language = ref("zh-cn");
const locale = computed(() => (language.value === "zh-cn" ? zhCn : en));
const { isMobile } = storeToRefs(store);
let timer = null;
// 回到顶部
const backTop = () => {
  let DOM = document.querySelector("#content");
  let scrollTop = DOM.scrollTop;
  if (scrollTop > 0) {
    topAnimate(DOM, scrollTop);
  }
};
// 返回顶部动画
const topAnimate = (dom, val) => {
  let px = val / 15;
  timer = setInterval(() => {
    if (val < 0) {
      clearInterval(timer);
      return;
    }
    dom.scrollTop = val;
    val -= px;
  }, 20);
};
provide("backTop", backTop);
</script>
<style lang="less" scoped></style>
